<template>
  <div>
    {{mes}}
    <table border="1px" width='450px' align='center'>
        <tr >
            <td>名字</td>
            <td>温度</td>
            <td>状态</td>

        </tr>
        <tr v-for="(ite,n) in lis" :key="n">
            <td>{{ite.name}}</td>
            <td>{{ite.heat}}</td>
            <td v-if='ite.status==1'>正常</td>
            <td v-if='ite.status==2' class="aaa">警告</td>
        </tr>
    </table>

  </div>
</template>

<script>
export default {
  data(){
    return{
      mes:'',
      ws:'',
      sendsms:'',
      lis:[]
    }
  },
  methods: {
    initWebsocket(){
      this.ws = new WebSocket("ws://127.0.0.1:8005/ws?id=2")
      this.ws.onopen=function(){
        alert("success")
      }
      this.ws.onmessage=(data)=>{
        console.log(data.data)
        this.lis=JSON.parse(data.data)['data']
        this.mes=JSON.parse(data.data)['msg']
        
      }

      this.ws.onclose=function(){
        alert("close")
      }
    },
    send(){
      this.ws.send(this.sendsms)
    }
  },
  mounted() {
    this.initWebsocket()
  },

}
</script>

<style>
.aaa{
    color: red;
}
</style>
